<template>
	<view class="page">
		<u-navbar title="个人资料" @leftClick="gomy" :autoBack="true">
		</u-navbar>
		<view class="form">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<u-form-item label="昵称" prop="userInfo.realname" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.realname" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
					ref="item1">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="年级" prop="userInfo.phonenumber" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phonenumber" border="none"></u--input>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
				@close="showSex = false" @select="sexSelect">
			</u-action-sheet>
			<u-button type="primary" @click="submit()"  class="button" color="#fab549">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
			mapState,
			mapMutations
		} from 'vuex' 
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						realname: '',
						sex: '',
						id:this.$store.state.userInfo.id,
						phonenumber:'',
						schoolcode:'',
						school:'',
						openid:this.$store.state.userInfo.openid,
						nickName:this.$store.state.userInfo.nickName,
						avatarUrl:this.$store.state.userInfo.avatarUrl,  																				
					},
					isInfo:this.$store.state.inforOver,
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.phonenumber': {
						type: 'string',
						required: true,
						message: '请填写年级',
						trigger: ['blur', 'change']
					},
					'userInfo.schoolcode': {
						type: 'number',
						required: true,
						message: '请填写学号',
						trigger: ['blur', 'change']
					},
					'userInfo.school': {
						type: 'string',
						required: true,
						message: '请填写学校名称',
						trigger: ['blur', 'change']
					}
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			//更新用户的信息()
			submit(){
				let that=this
					if((this.model1.userInfo.realname!='')&&(this.model1.userInfo.sex!='')&&(this.model1.userInfo.phonenumber!='')){
					this.$store.state.inforOver=true;
					
					uni.request({
						url: 'https://www.codingyt.com/club/wxuserinfo/update', //仅为示例，并非真实接口地址。
						data:
							JSON.stringify(that.model1.userInfo)
						,
						header: {
						      contentType: 'application/json; charset=UTF-8',
						},
						method: 'POST',
						success: function(res) {
							uni.switchTab({
								url:'my',
							})
						}
					})
				}else{
					uni.showModal({
						content:'存在未完成的信息，请认真填写报名信息'
					})
				}
			
			},
			getUserInfor(){
				let that=this//回调函数中我们采用的是that
				uni.request({
					url:'https://www.codingyt.com/club/wxuserinfo/select',
					data:{
						openid:that.model1.userInfo.openid
					},
					success(res) {
						that.model1.userInfo.realname=res.data.data[0].realname
						that.model1.userInfo.sex=res.data.data[0].sex
						that.model1.userInfo.phonenumber=res.data.data[0].phonenumber
						that.model1.userInfo.schoolcode=res.data.data[0].schoolcode
						that.model1.userInfo.school=res.data.data[0].school
					}
				})
			}
		},
		created() {
			this.getUserInfor()
		}
	};
</script>

<style>
	.page {
		position: absolute;
		width: 100%;
		height: 80%;
		margin-top: 180rpx;
	}
	.form {
		padding: 40rpx;
	}
	.button{
		margin-top: 10rpx;
	}
</style>
